// Select

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin select {
  flex: 1;
  width: 100%;
  @include flex();
  > label {
    display: inline-block;
    white-space: nowrap;
    height: $--x-select-height;
    line-height: $--x-select-height;
    color: $--x-text-300;
    font-weight: 600;
    @include text-align();
  }
  > .#{$--x-select-prefix}-row {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    > x-input {
      > .x-input {
        > .x-input-row {
          > input,
          > .x-input-value-template-value {
            cursor: pointer;
          }
        }
      }
    }
  }
  &.x-invalid,
  &.x-required {
    > label {
      color: $--x-danger;
    }
  }
  &.x-disabled {
    > .#{$--x-select-prefix}-row {
      > x-input {
        > .x-input {
          > .x-input-row {
            > input {
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }
  &.x-flex {
    &.x-direction {
      &-row {
        > label {
          padding: 0 0.5rem 0 0;
        }
      }
      &-row-reverse {
        > label {
          padding: 0 0 0 0.5rem;
        }
      }
      &-column {
        align-items: inherit;
      }
      &-column-reverse {
        align-items: inherit;
      }
    }
  }
}

@mixin select-portal {
  margin: 0.0625rem 0;
  font-size: $--x-select-font-size;
  color: $--x-text;
  border: $--x-select-border;
  width: 100%;
  border-radius: $--x-border-radius;
  box-shadow: $--x-box-shadow-light;
  position: relative;
  display: flex;
  background-color: $--x-background;
  overflow: hidden auto;
  max-height: calc(calc(#{$--x-select-height} * 6) + calc(#{$--x-border-width} * 7));
}
